<template>
    <div class="app-container">
        <div class="customContainer">
            <!-- 搜索头 -->
            <el-form :inline="true" :model="formInline" class="demo-form-inline" size="small">
                <el-form-item>
                    <el-select filterable placeholder="选择卡类型" v-model="formInline.type">
                        <el-option v-for="item in typeList" :key="item.id" :label="item.name" :value="item.id"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-select v-model="formInline.type_name" style="width:160px" @change="type_nameChange">
                        <el-option v-for="item in type_name" :key="item.id" :label="item.name" :value="item.id"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-input v-if="formInline.type_name==1" clearable placeholder="请输入卡号" v-model="formInline.card_no"
                        style="width:160px" @keyup.enter.native="searchClick"></el-input>
                    <el-input v-else clearable placeholder="请输入手机号" v-model="formInline.mobile" style="width:160px" @keyup.enter.native="searchClick"></el-input>
                </el-form-item>
                <el-form-item>
                    <dj-button size="small" @search="searchClick" />
                </el-form-item>
            </el-form>
            <!-- 表格 -->
            <el-table  highlight-current-row show-summary :data="list" v-loading.body="listLoading" border size="small" :key="type">
                <el-table-column align="center" label="卡所属门店" prop="store_name" width="100"></el-table-column>
                <el-table-column align="center" label="卡号">
                    <template slot-scope="scope">
                        {{scope.row.card_no}}
                    </template>
                </el-table-column>
                <el-table-column align="center" prop="card_name" label="卡类型"></el-table-column>
                <el-table-column align="center" prop="user_name" label="姓名"></el-table-column>
                <el-table-column align="center" label="手机">
                    <template slot-scope="scope">
                        {{scope.row.mobile}}
                    </template>
                </el-table-column>
                <template v-if="type==1">
                    <el-table-column align="center" prop="initial_coins" label="卡初始币数" width="100"></el-table-column>
                    <el-table-column align="center" prop="initial_tickets" label="卡初始票数" width="100"></el-table-column>
                    <el-table-column align="center" label="充值总币数">
                        <el-table-column prop="recharge_coins" align="center" label="普通充值">
                            <template slot-scope="scope">
                                <el-button type="text" @click="goPage(scope.row,'operation/vip_recharge_detail',1)">{{scope.row.recharge_coins}}</el-button>
                            </template>
                        </el-table-column>
                        <el-table-column align="center" prop="compensation_coins" label="赔币">
                            <template slot-scope="scope">
                                <el-button type="text" @click="goPage(scope.row,'operation/vip_recharge_detail',2)">{{scope.row.compensation_coins}}</el-button>
                            </template>
                        </el-table-column>
                        <el-table-column align="center" prop="save_coins" label="存币">
                            <template slot-scope="scope">
                                <el-button type="text" @click="goPage(scope.row,'operation/userSaveCoinsInfo')">{{scope.row.save_coins}}</el-button>
                            </template>
                        </el-table-column>
                        <el-table-column align="center" prop="package_coins" label="活动套餐">
                            <template slot-scope="scope">
                                <el-button type="text" @click="goPage(scope.row,'operation/vip_recharge_detail',3)">{{scope.row.package_coins}}</el-button>
                            </template>
                        </el-table-column>
                        <el-table-column align="center" prop="in_coins" label="转入币">
                            <template slot-scope="scope">
                                <el-button type="text" @click="goPage(scope.row,'operation/changeCardDetail',1)">{{scope.row.in_coins}}</el-button>
                            </template>
                        </el-table-column>
                        <el-table-column align="center" prop="recharge_total" label="充值合计"></el-table-column>
                    </el-table-column>
                    <el-table-column align="center" prop="expense_coins" label="消费总币数" width="100">
                        <el-table-column align="center" label="机台消费" prop="expense_coins">
                            <template slot-scope="scope">
                                <el-button type="text" @click="goPage(scope.row,'operation/vip_consume_detail',1)">{{scope.row.expense_coins}}</el-button>
                            </template>
                        </el-table-column>
                        <el-table-column align="center" prop="business_coins" label="收银台消费" width="100">
                            <template slot-scope="scope">
                                <el-button type="text" @click="goPage(scope.row,'operation/vip_consume_detail',2)">{{scope.row.business_coins}}</el-button>
                            </template>
                        </el-table-column>
                        <el-table-column align="center" prop="get_coins" label="提币">
                            <template slot-scope="scope">
                                <el-button type="text" @click="goPage(scope.row,'operation/vip_consume_detail',3)">{{scope.row.get_coins}}</el-button>
                            </template>
                        </el-table-column>
                        <el-table-column align="center" prop="out_coins" label="转出币">
                            <template slot-scope="scope">
                                <el-button type="text" @click="goPage(scope.row,'operation/changeCardDetail',2)">{{scope.row.out_coins}}</el-button>
                            </template>
                        </el-table-column>
                    </el-table-column>
                    <el-table-column align="center" label="存票总数">
                        <el-table-column align="center" label="存票机存票" prop="machine_save_tickets" width="100">
                            <template slot-scope="scope">
                                <el-button type="text" @click="goPage(scope.row,'operation/vip_save_detail',1)">{{scope.row.machine_save_tickets}}</el-button>
                            </template>
                        </el-table-column>
                        <el-table-column align="center" prop="compensation_tickets" label="赔票">
                            <template slot-scope="scope">
                                <el-button type="text" @click="goPage(scope.row,'operation/vip_save_detail',2)">{{scope.row.compensation_tickets}}</el-button>
                            </template>
                        </el-table-column>
                        <el-table-column align="center" prop="package_tickets" label="活动套餐">
                            <template slot-scope="scope">
                                <el-button type="text" @click="goPage(scope.row,'operation/vip_save_detail',3)">{{scope.row.package_tickets}}</el-button>
                            </template>
                        </el-table-column>
                        <el-table-column align="center" prop="in_tickets" label="转入票">
                            <template slot-scope="scope">
                                <el-button type="text" @click="goPage(scope.row,'operation/changeCardDetail',3)">{{scope.row.in_tickets}}</el-button>
                            </template>
                        </el-table-column>
                        <el-table-column align="center" prop="tickets_total" label="存票合计"></el-table-column>
                    </el-table-column>
                    <el-table-column align="center" prop="exchange_tickets" label="存票兑换">
                        <template slot-scope="scope">
                            <el-button type="text" @click="goPage(scope.row,'operation/vip_saveChange_detail')">{{scope.row.exchange_tickets}}</el-button>
                        </template>
                    </el-table-column>
                    <el-table-column align="center" prop="out_tickets" label="转出票">
                        <template slot-scope="scope">
                            <el-button type="text" @click="goPage(scope.row,'operation/changeCardDetail',4)">{{scope.row.out_tickets}}</el-button>
                        </template>
                    </el-table-column>
                </template>
                <template v-if="type==2">
                    <el-table-column align="center" prop="initial_times" label="卡初始次数" width="100"></el-table-column>
                    <el-table-column align="center" prop="recharge_times" label="获得次数">
                        <template slot-scope="scope">
                            <el-button type="text" @click="goPage(scope.row,'operation/vip_giveTimes_detali')">{{scope.row.recharge_times}}</el-button>
                        </template>
                    </el-table-column>
                    <el-table-column align="center" prop="expense_times" label="消费次数">
                        <template slot-scope="scope">
                            <el-button type="text" @click="goPage(scope.row,'operation/vip_consumeTimes_detail')">{{scope.row.expense_times}}</el-button>
                        </template>
                    </el-table-column>
                </template>
                <template v-if="type==3">
                    <el-table-column align="center" prop="initial_stars" label="卡初始星星数" width="100"></el-table-column>
                    <el-table-column align="center" prop="recharge_stars" label="获得星数">
                        <template slot-scope="scope">
                            <el-button type="text" @click="goPage(scope.row,'operation/vip_giveStar_detali')">{{scope.row.recharge_stars}}</el-button>
                        </template>
                    </el-table-column>
                    <el-table-column align="center" prop="expense_stars" label="消费星数">
                        <template slot-scope="scope">
                            <el-button type="text" @click="goPage(scope.row,'operation/vip_consumeStar_detail')">{{scope.row.expense_stars}}</el-button>
                        </template>
                    </el-table-column>
                </template>
            </el-table>
        </div>
    </div>
</template>
<script>
    import {
        getList,
    } from "@/api/member/vip_detail_query";
    export default {
        data() {
            return {
                list: [],
                listLoading: false,
                type: '1', //tabel样式 1会员卡,2次卡,3星星卡
                type_name: [{ id: '1', name: '卡号' }, { id: '2', name: '手机号' }],
                typeList: [{ id: '1', name: '会员卡' }, { id: '2', name: '次卡' }, { id: '3', name: '星星卡' }],
                storeList: [],
                formInline: {
                    type_name: '1',
                    type: '1',
                    card_no: '',
                    mobile: '',
                },
            }
        },
        methods: {
            type_nameChange() {
                this.formInline.card_no = '';
                this.formInline.mobile = '';
            },
            goPage(row, urlName, type) {
                this.$router.push({
                    name: urlName,
                    params: {
                        store_id: row.store_id,
                        card_no: row.card_no,
                        vip_id: row.vip_id,
                        type: type,//1普通充值 2赔币 3活动套餐
                    },
                    query: { routerflag: 1 }
                })
            },
            // 搜索
            searchClick() {
                if (!this.formInline.card_no && !this.formInline.mobile) {
                    this.$message({ type: 'error', message: '请填写卡号或手机号' });
                    return;
                }
                this.fetchData();
            },
            // 列表获取
            fetchData() {
                this.listLoading = true;
                this.list = [];
                getList(this.formInline).then(response => {
                    this.type = this.formInline.type;
                    response.forEach(val => {
                        val.in_coins=val.in_coins?val.in_coins:0;
                        val.out_coins=val.out_coins?val.out_coins:0;
                        val.in_tickets=val.in_tickets?val.in_tickets:0;
                        val.out_tickets=val.out_tickets?val.out_tickets:0;
                        val.recharge_total = (val.recharge_coins * 1 + val.compensation_coins * 1 + val.package_coins * 1+val.in_coins* 1).toFixed(2) * 1;
                        val.tickets_total = (val.machine_save_tickets * 1 + val.compensation_tickets * 1 + val.package_tickets * 1 + val.in_tickets* 1).toFixed(2) * 1;
                        val.mobile = val.mobile || '-';
                        val.user_name = val.user_name || '-';
                        switch (val.type_id) {
                            case '0':
                                val.card_name = val.card_type_id == 2 ? '临时卡' : val.card_type_id == 0 ? '普通会员卡' : '精英会员卡'
                                break;
                            case '1':
                                val.card_name = val.card_type_id == 10 ? '10次卡' : '20次卡'
                                break;
                            case '2':
                                val.card_name = '季卡'
                                break;
                            case '3':
                                val.card_name = '年卡'
                                break;
                            case '4':
                                val.card_name = '星星卡'
                                break;
                            default:
                                val.card_name = '未知'
                                break;
                        }
                    });
                    this.list = response;
                    this.listLoading = false;
                }).catch(err => {
                    this.listLoading = false;
                })
            },
        }
    }
</script>